import { Form, Input } from 'antd'
import { useState, useMemo, useEffect } from 'react'
function ComputerName() {
  const [form] = Form.useForm()
  const [formData, setFormData] = useState({ username: '', password: '' })

  useEffect(() => {
    setFormData({ username: '默认名称', password: '默认密码' })
    form.setFieldsValue({ username: '默认名称', password: '默认密码' })//用于回显给他赋值
  }, [])
  //计算属性
  const fullName = useMemo(() => {
    return `${formData.username}---${formData.password}`
  }, [formData])
  function onFinish(values) {
    setFormData(values)
  }
  function onValuesChange(values) {
    setFormData({ ...formData, ...values })
  }
  return (
    <div>
      <Form
        name="basic2"
        // 名称不能一样
        form={form}
        labelCol={{ span: 12 }}
        wrapperCol={{ span: 12 }}
        style={{ maxWidth: '60%' }}
        onFinish={onFinish}
        onValuesChange={onValuesChange}
        autoComplete="off"
      >
        <Form.Item
          label="名称"
          name="username" >
          <Input />
        </Form.Item>
        <Form.Item
          label="密码"
          name="password" >
          <Input />
        </Form.Item>
      </Form>
      <div>计算后的属性值：{fullName}</div>
    </div>
  )
}

export default ComputerName
